<template>
  <el-row v-loading="loading">
    <el-col  :span="11" v-for="(item, index) in list" :key="index" :style="{marginBottom:'20px',marginRight:'18px',marginLeft:'18px'}" v-if="item.isShow">
      <el-card :body-style="{ padding: '20px',minHeight:'211px' }">
        <div class="tit" v-if="checkPermission(['manager'])">{{item.btntxt}}</div>
        <el-upload v-if="checkPermission(['engineer'])" :data="item" :headers="httpHeaders" auto-upload class="upload-demo" :on-success="handleAvatarSuccess" :action="FileUrl" :on-remove="handleRemove" :file-list="item.picList" list-type="picture">
          <el-button size="small" type="primary" >{{item.btntxt}}</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <ul class="el-upload-list el-upload-list--picture" v-if="checkPermission(['manager'])">
          <li v-for="(element, index) in item.picList" tabindex="index" class="el-upload-list__item is-success" :key="index">
            <img :src="element.url" alt  class="el-upload-list__item-thumbnail" >
            <a class="el-upload-list__item-name">
              <i class="el-icon-document"></i>{{element.name}}
            </a>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-form ref="dataForm" label-width="0">
        <el-form-item>
          <el-input type="textarea" placeholder="请输入备注" :rows="5" v-model="remark" :disabled="checkPermission(['engineer'])? false : true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" v-if="checkPermission(['engineer'])">提交</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import checkPermission from "@/utils/permission"; // 权限判断函数
import { getToken } from "@/utils/auth";
import { getProjectData, updateProjectState } from "@/api/project";
import {
  getProjectFileList,
  deletePic,
  getRemark,
  updateRemark
} from "@/api/projectFile";
import trackVue from "./track.vue";
export default {
  props: ["getId"],
  data() {
    return {
      loading: false,
      httpHeaders: {
        Authorization: getToken()
      },
      FileUrl: "http://gsp.coldcloud.com/projectFile/upload",
      list: [
        {
          typeId: 1,
          btntxt: "操作记录表单",
          projectId: this.getId,
          picList: [],
          isShow: true
        },
        {
          typeId: 2,
          btntxt: "现场验证布点草图",
          projectId: this.getId,
          picList: [],
          isShow: true
        },
        {
          typeId: 3,
          btntxt: "现场验证布点图",
          projectId: this.getId,
          picList: [],
          isShow: true
        },
        {
          typeId: 4,
          btntxt: "现场照片",
          projectId: this.getId,
          picList: [],
          isShow: true
        },
        {
          typeId: 5,
          btntxt: "现场蓄冷剂排版照片",
          projectId: this.getId,
          picList: [],
          isShow: true
        }
      ],

      remark: ""
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    checkPermission,
    // 上传成功后
    handleAvatarSuccess(response, file, fileList) {
      this.$message({
        message: "图片上传成功",
        type: "success"
      });
      this.getList();
    },

    // 删除图片
    handleRemove(file) {
      deletePic({ fid: file.pictureId });
    },

    // 获取图片数据和remark信息
    getList() {
      this.loading = true;
      // 获取projectType,为冷藏车3时，typeId为5的不显示
      getProjectData({ projectId: this.getId }).then(res => {
        let projectType = res.data.projectType;
        for (const value of this.list) {
          if (projectType == 3) {
            if (value.typeId == 5) {
              value.isShow = false;
            }
          }
          // 获取图片数据
          getProjectFileList({
            projectId: this.getId,
            typeId: value.typeId
          }).then(response => {
            value.picList = response.data.map(item => {
              return {
                url: item.url,
                name: item.originname,
                pictureId: item.pictureId
              };
            });
            if (value.typeId == 1 || value.typeId == 2) {
              value.picList.unshift();
            }
          });
        }
      });
      // 获取remark信息
      getRemark({ projectId: this.getId }).then(response => {
        this.remark = response.data;
        this.loading = false;
      });
    },

    //提交remark信息
    onSubmit() {
      if (!this.remark) {
        this.$message({
          message: "请输入备注内容",
          type: "warning"
        });
      } else {
        let project = {
          pid: this.getId,
          remark: this.remark
        };
        updateRemark(project).then(response => {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.getList();
          updateProjectState({ pid: this.getId, state: 8 }).then(_ => {
            this.$emit("changeState");
          });
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.tit {
  line-height: 30px;
  border-bottom: 1px solid #dfdfdf;
}
</style>

